<template>
	<view class="container bottom-ios">
		<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" :src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')" mode="aspectFit"></image>
			</template>
			<text class="title" :class="isBlack ? 'color-black' : 'color-white'">感恩答谢回馈</text>
			<template slot="right">
			</template>
		</uni-nav-bar>
		<view class="body flex-c ac">
			<view class="reward card flex-c">
				<view class="title-box">
					<text class="title text-large">赠送礼品</text>
				</view>
				<view class="reward-box flex-r ac">
					<template v-if="rewardList[levelIndex]">
						<view class="reward-detail flex-r ac LV2" v-if="levelIndex == 'LV2'">
							<view class="detail flex-c">
								<text class="text-large">{{rewardList[levelIndex][0].title}}</text>
								<text class="color-red text-regular">{{rewardList[levelIndex][0].money}}</text>
							</view>
						</view>
						<template v-else>
							<view class="reward-detail flex-r ac chd">
								<view class="detail text-secondary flex-c">
									<text>{{rewardList[levelIndex][0].title}}</text>
									<text class="color-red">{{rewardList[levelIndex][0].money}}</text>
								</view>
							</view>
							<image class="add-icon" src="@/public/images/other/r_jh.png" mode="aspectFit"></image>
							<view class="reward-detail flex-r ac" :class="levelIndex">
								<view class="detail flex-c">
									<text class="goods">{{rewardList[levelIndex][1].title}}</text>
								</view>
							</view>
						</template>
					</template>
				</view>
				<text class="notice text-small color-grey" v-if="levelIndex == 'LV2'">温馨提示：领取成功后彩虹豆将存入您的彩虹体育账户。</text>
				<text class="notice text-small color-grey" v-else>温馨提示：彩虹豆将在收货地址提交后的12小时内到账；礼品将在收获地址提交后的10个工作日内到货。</text>
			</view>
			<template v-if="levelIndex.substring(2) > 2">
				<view class="address card flex-c">
					<view class="title-box">
						<text class="title text-large">收货地址</text>
					</view>
					<view class="input-box flex-r ac jsb">
						<text class="text-regular">收货人</text>
						<input class="input" type="text" v-model="form.name" :disabled="disabled" placeholder="请输入收货人姓名" placeholder-style="color:#B3B3B3;font-size:28rpx" :maxlength="10">
					</view>
					<view class="input-box flex-r ac jsb">
						<text class="text-regular">手机号码</text>
						<input class="input" type="number" v-model="form.phone" :disabled="disabled" placeholder="请输入收货人手机号码" placeholder-style="color:#B3B3B3;font-size:28rpx" :maxlength="11" @input="inputPhone">
					</view>
					<view class="select-box flex-r ac">
						<text class="text-regular">所在地区</text>
						<text class="blank"></text>
						<view class="city text-hidden" v-if="disabled && form.province">{{form.province + ' ' + form.city + ' ' + form.area}}</view>
						<uni-data-picker class="picker" v-else v-model="select" v-slot:default="{data}" :readonly="disabled" :localdata="provinceData" :clear-icon="false" placeholder="请选择省、市、区" popup-title="请选择所在地区" @change="selectChange">
							<view v-if="data && data.length" class="city text-hidden">{{form.province + ' ' + form.city + ' ' + form.area}}</view>
							<text v-else class="city placeholder">请选择省、市、区</text>
						</uni-data-picker>
						<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
					</view>
					<view class="text-box flex-c">
						<text class="text-regular">详细地址</text>
					</view>
					<view class="textarea">
						<textarea v-model="form.address" :disabled="disabled" placeholder="请输入详细的小区楼栋/乡村名称" placeholder-style="color:#B3B3B3;font-size:28rpx"></textarea>
					</view>
				</view>
				<view class="remark card flex-c">
					<view class="title-box">
						<text class="title text-large">备注</text>
					</view>
					<view class="textarea">
						<textarea v-model="form.type" :disabled="disabled" :placeholder="placeholder" placeholder-style="color:#B3B3B3;font-size:28rpx"></textarea>
					</view>
				</view>
			</template>
		</view>
		<view class="foot" v-if="disabled && levelIndex == 'LV2'">
			<button type="default" class="button">已领取</button>
		</view>
		<view class="foot" v-else-if="!disabled">
			<button type="default" class="button" :class="{'active': canSubmit}" @tap="submitForm">立即领取</button>
		</view>
		<view class="full-screen flex-r ac jc" v-if="showToast">
			<view class="success flex-c ac">
				<view class="success-content flex-c ac">
					<image class="bgimg" src="@/public/images/user/lqcg2.png" mode="widthFix"></image>
					<view class="info flex-c ac">
						<text class="info-title">恭喜您领取成功</text>
						<button class="btn-default" @tap="closeToast">朕知道了</button>
					</view>
				</view>
				<view class="close-icon flex-c" @tap="closeToast">
					<image src="@/public/images/user/qx_x.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import province from '@/public/json/province.json'
	export default {
		data() {
			return {
				levelIndex: 'LV0',
				isBlack: false,
				navBorder: false,
				navBgColor: 'rgba(255,255,255,0)',
				provinceData: [],
				select: null,
				form: {
					name: null,
					phone: null,
					province: null,
					city: null,
					area: null,
					address: null,
					type: null,
				},
				rewardList: {
					'LV2': [
						{title: '彩虹豆',money: 200,icon: 'r_chd2.png'}
					],
					'LV3': [
						{title: '彩虹豆',money: 200,icon: 'r_chd2.png'},
						{title: '五大联赛球衣',money: 0,icon: 'LV3.png'},
					],
					'LV4': [
						{title: '彩虹豆',money: 500,icon: 'r_chd2.png'},
						{title: 'Zippo打火机',money: 0,icon: 'LV4.png'},
					],
					'LV5': [
						{title: '彩虹豆',money: 1000,icon: 'r_chd2.png'},
						{title: 'Apple Air Pods基础版/索尼蓝牙耳机',money: 0,icon: 'LV5.png'},
					],
					'LV6': [
						{title: '彩虹豆',money: 3000,icon: 'r_chd2.png'},
						{title: 'iPhone14 Pro 256G',money: 0,icon: 'LV6.png'},
					],
					'LV7': [
						{title: '彩虹豆',money: 3000,icon: 'r_chd2.png'},
						{title: 'iPhone14 Pro 256G',money: 0,icon: 'LV6.png'},
					]
				},
				placeholder: '请输入礼品备注',
				disabled: false,
				showToast: false
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			canSubmit() {
				if(this.levelIndex == 'LV2') {
					return !this.disabled
				}else{
					return Object.keys(this.form).every((item) => {
						if(this.form[item]){
							return true
						}
					})
				}
			}
		},
		onLoad() {
			this.provinceData = province
			this.getUserAddress();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(this.timer){
				return false
			}
			this.timer = setTimeout(()=>{
				this.setNavBgColor()
				this.timer = null
			}, 50);
		},
		methods: {
			//获取已提交的地址信息
			getUserAddress() {
				this.$http.get({
					url: '/api/appUser/userAddress/getUserAddress',
					data: {
						userId: this.user.userId
					}
				}).then((data)=>{
					console.log(data);
					if(data.success){
						if(data.result && data.result.level) {
							this.disabled = true
							this.levelIndex = data.result.level
							for(let item in this.form){
								if(typeof data.result[item] != 'undefined'){
									this.form[item] = data.result[item]
								}
							}
						}else{
							this.levelIndex = this.user.level
						}
						let index = this.levelIndex.substring(2);
						if(index < 2){
							this.disabled = true
							uni.showToast({
								title: '您当前的会员等级不符合要求',
								icon: 'none',
								mask: true
							})
							this.$ShowToast({text: '您当前的会员等级不符合要求', type: 2})
							setTimeout(() => {
								this.$goBack(1);
							}, 1500)
							return
						}
						if(index == 3){
							this.placeholder = '请备注5大联赛球衣，球队名称、号码、颜色、尺寸，例如：曼城球衣主场9号，成人XL码'
						}else if(index == 5){
							this.placeholder = '请备注苹果蓝牙耳机/索尼蓝牙耳机，例如：iPhone air pods基础款/索尼蓝牙耳机'
						}
					}else{
						this.disabled = true
						this.levelIndex = this.user.level
						uni.showToast({
							title: '请求数据错误，请返回重试',
							icon: 'none',
							mask: true
						})
						this.$ShowToast({text: '请求数据错误，请返回重试', type: 2})
						setTimeout(() => {
							this.$goBack(1);
						}, 1500)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			submitForm() {
				if(this.disabled){
					return
				}
				if(this.levelIndex != 'LV2'){
					if(!this.form.phone || this.form.phone.length != 11){
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
						return false
					}
					if(!this.select){
						uni.showToast({
							title: '请选择省、市、区',
							icon: 'none'
						})
						return false
					}
					let canSubmit = Object.keys(this.form).every((item) => {
						if(!this.form[item]){
							if(item == 'name'){
								uni.showToast({
									title: '请输入收货人姓名',
									icon: 'none'
								})
							}else if(item == 'address'){
								uni.showToast({
									title: '请输入详细的小区楼栋/乡村名称',
									icon: 'none'
								})
							}else if(item == 'type'){
								uni.showToast({
									title: '请输入礼品备注',
									icon: 'none'
								})
							}
							return false
						}else{
							return true
						}
					})
					if(!canSubmit){
						return
					}
				}
				if(this.canSubmit && !this.isSubmit){
					this.isSubmit = true
					console.log(this.form);
					this.$http.post({
						url: '/api/appUser/userAddress/saveAddress',
						data: {
							userId: this.user.userId,
							level: this.user.level,
							...this.form
						}
					}).then((data) => {
						console.log(data);
						if(data.success){
							if(this.levelIndex != 'LV2'){
								uni.showToast({
									title: data.message || '领取提交成功！',
									icon: 'none'
								})
								this.$ShowToast({text: data.message || '领取提交成功！', type: 1})
								setTimeout(() => {
									this.$goBack(1);
								}, 1000)
							}else{
								this.showToast = true
								this.disabled = true
								this.$store.dispatch('updateUserinfo')
							}
						}else{
							uni.showToast({
								title: data.message || '提交失败，请重试',
								icon: 'none'
							})
							this.isSubmit = false
						}
					})
				}
			},
			//关闭弹窗
			closeToast() {
				this.showToast = false
				this.$goBack(1);
			},
			//输入手机号
			inputPhone(e) {
				if(e.detail.value && e.detail.value.length == 11){
					if(! /^[1][3-9][\d]{9}/.test(e.detail.value)){
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
						this.$nextTick(()=>{
							this.form.phone = null
						})
					}
				}
			},
			//选择地区
			selectChange(e) {
				console.log(e);
				this.select = e.detail.value[2] && e.detail.value[2].value
				this.form.province = e.detail.value[0] && e.detail.value[0].text
				this.form.city = e.detail.value[1] && e.detail.value[1].text
				this.form.area = e.detail.value[2] && e.detail.value[2].text
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		background: linear-gradient(180deg, #FF7200 0%, rgba(255,216,0,0) 100%);
		background-size: 100% 440rpx;
		background-repeat: no-repeat;
		.body{
			.card{
				width: 710rpx;
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-sizing: border-box;
			}
			.title-box{
				height: 96rpx;
				box-shadow: 0rpx 1rpx 0rpx 0rpx #EDEDED;
				.title{
					font-weight: 500;
					line-height: 96rpx;
				}
			}
			.reward{
				.reward-box{
					padding: 30rpx 0;
					.reward-detail{
						width: 295rpx;
						height: 140rpx;
						position: relative;
						background-position: center center;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						.chd-icon{
							position: absolute;
							left: 30rpx;
							width: 81rpx;
							height: 72rpx;
						}
						.detail{
							position: absolute;
							left: 160rpx;
							font-weight: 500;
							word-break: break-all;
							.color-red{
								margin-top: 30rpx;
							}
						}
						&.chd{
							background-image: url('~@/public/images/other/chd-ys.png');
						}
						&.LV2{
							width: 670rpx;
							height: 200rpx;
							background-image: url('~@/public/images/other/LV2.png');
							background-size: 100% 100%;
							.detail{
								position: absolute;
								left: 230rpx;
								font-weight: 500;
								word-break: break-all;
								.color-red{
									margin-top: 66rpx;
								}
							}
						}
						@for $i from 3 through 7{
							&.LV#{$i}{
								@if $i == 7 {
									background-image: url('~@/public/images/other/LV6.png');
								} @else {
									background-image: url('~@/public/images/other/LV#{$i}.png');
								}
							}
						}
					}
					.add-icon{
						flex: 2;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.notice{
					margin-bottom: 30rpx;
					line-height: 36rpx;
				}
			}
			.address{
				.input-box{
					height: 96rpx;
					box-shadow: 0rpx 1rpx 0rpx 0rpx #EDEDED;
					.input{
						text-align: right;
						font-size: 28rpx;
						color: #666666;
					}
				}
				.select-box{
					height: 96rpx;
					box-shadow: 0rpx 1rpx 0rpx 0rpx #EDEDED;
					.blank{
						flex: 2;
					}
					.city{
						margin-right: 8rpx;
						font-size: 28rpx;
						max-width: 450rpx;
						color: #666666;
					}
					.right-icon{
						width: 24rpx;
						height: 24rpx;
					}
					.picker{
						.placeholder{
							font-size: 28rpx;
							color: #B3B3B3;
						}
					}
					/deep/ .picker-view{
						padding-bottom: var(--safe-area-inset-bottom);
					}
				}
				.text-box{
					height: 96rpx;
					line-height: 96rpx;
				}
			}
			.remark{
				.title-box{
					box-shadow: none;
				}
				.textarea{
					height: 120rpx;
				}
			}
			.textarea{
				width: 670rpx;
				height: 180rpx;
				background: #F2F5FA;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				padding: 20rpx;
				box-sizing: border-box;
				textarea{
					width: 100%;
					height: 100%;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
		.foot{
			padding: 20rpx;
			.button{
				height: 96rpx;
				margin: 0;
				padding: 0;
				border: none;
				background: linear-gradient(90deg, #FFCA80 0%, #FF8080 100%);
				border-radius: 48rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				&.active{
					background: linear-gradient(90deg, #FF9600 0%, #FF0000 100%);
				}
			}
		}
		.full-screen{
			z-index: 997;
			touch-action: none;
			.success{
				.success-content{
					background: #FFFFFF;
					border-radius: 20rpx;
					.bgimg{
						width: 480rpx;
					}
					.info{
						.info-title{
							font-size: 36rpx;
							font-weight: 500;
							margin: 40rpx 0;
						}
						.btn-default{
							margin: 0 0 60rpx;
							width: 320rpx;
							height: 88rpx;
							background: linear-gradient(90deg, #FF9600 0%, #FF0000 100%);
							border: none;
							border-radius: 44rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 88rpx;
							padding: 0;
						}
					}
				}
				.close-icon{
					image{
						width: 80rpx;
						height: 160rpx;
					}
				}
			}
		}
	}
</style>
